iT邦幫忙

2024 iThome 鐵人賽

DAY 29
1
Modern Web

CSS的預處理器-SASS/SCSS系列 第 29

DAY 29.SCSS學習心得

  • 分享至 

  • xImage
  •  

終於來到第29天了,SCSS系列的學習也快接近尾聲了,藉由近30天的練習以及相關資訊的吸收,讓我對原本陌生的SCSS有更多的了解也學到基礎的技巧。以下是我的一些總結:

1. 從繁瑣到高效

我們都知道CSS的內容會比較繁瑣,很容易在鑽寫上造成混亂,所以透過像嵌套(Nesting)和變數(Variables)這樣的功能,讓樣式的調整更簡單、更清晰了!

2. 模組化思維的養成

SCSS 鼓勵將樣式進行模組化拆分,通過 @import 或 @use 引入不同部分的樣式,讓我逐漸養成了模組化的思維習慣。這不僅提高了樣式代碼的可讀性,也使得樣式表更加清晰且易於維護。

3. 複用與繼承的力量

SCSS 提供了混入(@mixin)和繼承(@extend)的功能,使代碼更加 "DRY(Don't Repeat Yourself)"。在學習的過程中,我逐慢慢掌握如何將通用的樣式抽象出來,並通過混入進行重複利用,避免寫出冗長且重複的代碼。這些技巧特別適合應對複雜的設計需求,比如當一個專案中需要處理多個相似的佈局或元件時,複用性大大提升。

實作預告

我再寫一個簡單的心理測驗網站,其中會利用SCSS的技巧!!,明天會放於貼文當作這系列更新的結尾~~
https://ithelp.ithome.com.tw/upload/images/20241005/201691406gfqA7zscf.png


上一篇
DAY 28.成為 SASS/SCSS 專家的路徑
下一篇
DAY 30.SCSS實作小品
系列文
CSS的預處理器-SASS/SCSS30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言